<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        /* 公用的面 */
        .face{
            width:100px; height:100px;
            background: #e7e7e7;
            border-radius: 8px;
            margin: 50px;
            padding: 5px;
            box-sizing: border-box;
        }
        
        /* 公用的圆 */
        .cicle{
            width:23px; height:23px; background: #333;
            border-radius: 50%;
        }

        /* face5指的第五个面 */
        .face5{
            display: flex;
            flex-wrap: wrap;
            /* 超出才换行，不超出不会换行 */
            align-content: space-between;
        }
        .face5>div{
            width:100%;
            display: flex;
            justify-content: space-between;
        }
        .face5>div:nth-of-type(2){
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="face face5">
        <div>
            <div class="cicle"></div>
            <div class="cicle"></div>
        </div>
     
        <!-- +=100px 又不能动圆 -->
        <div>
            <div class="cicle"></div> 
        </div>
        <div>
            <div class="cicle"></div>
            <div class="cicle"></div>
        </div>
    </div>
</body>
</html>